<link rel="stylesheet"
	th:href="@{/admin/plugins/bootstrap-table/src/bootstrap-table.css}">

<script type="text/javascript"
	th:src="@{/admin/plugins/bootstrap-table/dist/bootstrap-table.min.js}"></script>

<!-- bootstrap datepicker -->
<link rel="stylesheet"
	th:href="@{/admin/plugins/datepicker/datepicker3.css}">
<section class="content-header">
	<h1>
		内容管理 <small>文章内容</small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> 后台</a></li>
		<li><a href="#">内容管理</a></li>
		<li class="active">文章管理</li>
	</ol>
</section>

<!-- Main content -->
<section class="content">
	<!-- Default box -->
	<div class="box collapsed-box">
		<div class="box-header">
			<h3 class="box-title">文章发布</h3>
			<!-- tools box -->
			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool"
					data-widget="collapse" data-toggle="tooltip" title="Collapse">
					<i class="fa fa-plus"></i>
				</button>

			</div>
			<!-- /. tools -->
		</div>
		<!-- /.box-header -->
		<div class="box-body ">
			<form>
				<div class="form-group">
					<label>标题</label> <input class="form-control form-article-add"
						name="title" type="text" placeholder="标题"></input>
				</div>
				<div class="form-group">
					<label>作者</label> <input class="form-control form-article-add"
						name="author" type="text" placeholder="作者"></input>
				</div>
				<div class="form-group">
					<label>简介</label> <input class="form-control form-article-add"
						name="introduction" type="text" placeholder="简介"></input>
				</div>
				<div class="form-group">
					<label>栏目选择</label> <select name="category"
						id="articleCategorySelect" class="form-control  form-article-add">
					</select>
				</div>
				<div class="form-group">
					<label>置顶级别</label> <select name="order"
						class="form-control form-article-add">
						<option value="5" selected="selected">普通</option>
						<option value="4">置顶1</option>
						<option value="3">置顶2</option>
						<option value="2">置顶3</option>
						<option value="6">置后1</option>
						<option value="7">置后2</option>
						<option value="8">置后3</option>
					</select>
				</div>
				<div class="form-group">
					<label>图片</label> <span> <span class="btn selectPhoto">选择图片</span>
						<img class="articlePhotoImg"
						style="max-height: 100px; max-width: 100px" />
					</span>
				</div>
				<div class="form-group">
					<label>Date:</label>

					<div class="input-group date">
						<div class="input-group-addon">
							<i class="fa fa-calendar"></i>
						</div>
						<input type="text"
							class="form-control form-article-add pull-right" name="date"
							id="datepicker">
					</div>
					<!-- /.input group -->
				</div>
				<div class="form-group">
					<label>内容</label>
					<!--用父容器来控制宽度-->
					<div>
						<!--用当前元素来控制高度-->
						<div id="editor">
							<p>请输入内容...</p>
						</div>
					</div>

				</div>
				<input type="hidden" name="photo"
					class="articlePhoto form-article-add" />
			</form>
		</div>
		<div class="box-footer">
			<button type="submit"
				class="btn btn btn-primary pull-right save-article">保&nbsp;&nbsp;存</button>
		</div>
	</div>
	<!-- /.box -->

	<div class="box collapsed-box">
		<div class="box-header with-border">
			<h3 class="box-title">文章列表</h3>

			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool"
					data-widget="collapse" data-toggle="tooltip" title="Collapse">
					<i class="fa fa-plus"></i>
				</button>

			</div>
		</div>
		<div class="box-body">
			<table class="table table-hover article-table" id="articleTable"
				data-pagination="true" data-show-refresh="true"
				data-show-toggle="true" data-showColumns="true">

				<tbody>
				</tbody>
			</table>
		</div>
		<div class="box-footer"></div>
		<!-- /.box-footer-->
		<!-- /.box -->
		<div class="hide-div">
			<form class="photoUpladForm">
				<input type="text" name="name" value="hello"> 
				<input class="input-file article-photo-input" name="uploadFile"
					onchange="uploadPhoto()" type="file"></input>
			</form>
		</div>
</section>
<!-- Button trigger modal -->


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">文章编辑</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label>标题</label> <input class="form-control form-article-edit"
							name="title" type="text" placeholder="标题"></input>
					</div>
					<div class="form-group">
						<label>作者</label> <input class="form-control form-article-edit"
							name="author" type="text" placeholder="作者"></input>
					</div>
					<div class="form-group">
						<label>简介</label> <input class="form-control form-article-edit"
							name="introduction" type="text" placeholder="简介"></input>
					</div>
					<div class="form-group">
						<label>栏目选择</label> <select name="category"
							id="articleCategoryEditSelect"
							class="form-control  form-article-edit">
						</select>
					</div>
					<div class="form-group">
						<label>置顶级别</label> <select name="order"
							class="form-control form-article-edit">
							<option value="5">普通</option>
							<option value="4">置顶1</option>
							<option value="3">置顶2</option>
							<option value="2">置顶3</option>
							<option value="6">置后1</option>
							<option value="7">置后2</option>
							<option value="8">置后3</option>
						</select>
					</div>
					<div class="form-group">
						<label>图片</label> <span> <span class="btn selectPhoto">选择图片</span>
							<img class="articleEditPhotoImg"
							style="max-height: 100px; max-width: 100px" />
						</span>
					</div>
					<div class="form-group">
						<label>Date:</label>

						<div class="input-group date">
							<div class="input-group-addon">
								<i class="fa fa-calendar"></i>
							</div>
							<input type="text"
								class="form-control form-article-edit pull-right" name="date"
								id="datepickerEdit">
						</div>
						<!-- /.input group -->
					</div>
					<div class="form-group">
						<label>内容</label>
						<!--用父容器来控制宽度-->
						<div>
							<!--用当前元素来控制高度-->
							<div id="editor2">
								<p>请输入内容...</p>
							</div>
						</div>

					</div>
					<input type="hidden" name="photo"
						class="articlePhoto form-article-edit" />
					<input type="hidden" name="id"
						class="articlePhoto form-article-edit" />
				</form>
			</div>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default edit-modal-close" data-dismiss="modal">Close</button>
			<button type="button"
				class="btn btn btn-primary pull-right edit-article">编&nbsp;&nbsp;辑</button>
			<!-- 
			<button type="button" class="btn btn-primary">Save changes</button> -->
		</div>
	</div>
</div>



<!-- bootstrap datepicker -->
<script th:src="@{/admin/plugins/datepicker/bootstrap-datepicker.js}"></script>

<!-- /.content -->
<script type="text/javascript" th:src="@{/resources/js/admin/article.js}"></script>

